import { useState, useEffect, useRef, useMemo } from 'react';
import { Button, Input, Popover, message } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import HeaderTab from '@/components/CommonTab';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { getConditionOp, saveConditionOp } from '../../services';
import styles from './index.module.less';

const { TextArea } = Input;

const tabArr = [//顶部tab信息
	{ key: '1', tab: '退货退款' },
	{ key: '2', tab: '换货' },
]

export default ({ handleOk, handleCancel }) => {

	const [type, setType] = useState('1');
	const [value, setValue] = useState('');
	const [open, setOpen] = useState(false);
	const [loading, setLoading] = useState(false);

	const selectionStart = useRef(0);

	useEffect(() => {
		getConfigFunc();
	}, [type])

	useEffect(() => {
		setOpen(true);
	}, [])

	const getConfigFunc = async () => {
		setLoading(true);
		const { data, success } = await getConditionOp({ type });
		setLoading(false);
		if (success) {
			setValue(data?.value || '');
		}
	}

	const content = useMemo(() => {
		let str;
		if (type == 1) {
			str = '如果用户没走收货流程直接同意退款，则会在同意退款的时候回传备注';
		} else {
			str = '如果用户没走收货流程直接同意退款，则会在换货补寄获取到运单号的时候回传备注';
		}
		return <div style={{ width: '280px' }}>{str}</div>
	}, [type])

	const tabProps = {
		type,
		data: tabArr,
		onChange(val) {
			setType(val);
			setValue('');
		}
	}

	const handleClick = (content) => {
		if (!value) {
			setValue(content);
		}
		const index = selectionStart.current,
			frontContent = value.slice(0, index),
			lastContent = value.slice(index);
		selectionStart.current += content?.length;
		setValue((frontContent + content + lastContent)?.slice(0, 150));
	}

	const onOk = async () => {
		setLoading(true);
		const { success } = await saveConditionOp({ type: Number(type), value });
		setLoading(false);
		if (success) {
			message.success('规则设置成功');
			setOpen(false);
		}
	}

	const onCancel = () => {
		setOpen(false);
	}

	const afterClose = () => {
		handleCancel();
	}

	return (
		<CommonModal
			open={open}
			title="设置备注回传规则"
			okText="保存"
			onCancel={onCancel}
			width={468}
			onOk={onOk}
			afterClose={afterClose}
		>
			<HeaderTab {...tabProps} />
			<div className="flex" style={{ marginBottom: '8px' }}>
				<div className={styles.leftLabel}>回传时间：</div>
				<div className={styles.rightContent}>
					<span className='common-color9'>确认收货</span>
					<Popover content={content} placement='topLeft' trigger='hover'>
						<QuestionCircleOutlined style={{ color: '#999', marginLeft: '8px', cursor: 'pointer' }} />
					</Popover>
				</div>
			</div>
			<div className="flex" style={{ marginBottom: '16px' }}>
				<div className={styles.leftLabel}>回传位置：</div>
				<div className={styles.rightContent}>售后单关联的订单<span className='common-color9'>卖家备注</span></div>
			</div>
			<div className="flex" style={{ marginBottom: '16px' }}>
				<div className={styles.leftLabel}></div>
				<div className={styles.rightContent}>
					<Button onClick={() => handleClick('[退货时间]；')}>退货时间</Button>
					<Button onClick={() => handleClick('[商品名称]；')}>商品名称</Button>
					<Button onClick={() => handleClick('[颜色规格]；')}>颜色规格</Button>
					<Button onClick={() => handleClick('[商品编码]；')}>商品编码</Button>
					<Button onClick={() => handleClick('[款式编码]；')}>款式编码</Button>
					<Button onClick={() => handleClick('[售后商品数量]；')}>售后商品数量</Button>
					<Button onClick={() => handleClick('[寄回快递单号]；')}>寄回快递单号</Button>
				</div>
			</div>
			<div className="flex">
				<div className={styles.leftLabel}>追加的备注：</div>
				<div className={styles.rightContent}>
					<TextArea
						value={value}
						autoSize={{ minRows: 4, maxRows: 9 }}
						onBlur={(e) => selectionStart.current = e.target.selectionStart}
						onChange={(e) => setValue(e.target.value)}
					/>
					{type == 2 && <span style={{ display: "inline-block", marginTop: '8px' }}>注意：这里的商品字段为换出商品的商品数据</span>}
				</div>
			</div>
			<CommonLoading loading={loading} />
		</CommonModal>
	)
}